<template>
    <div class="auth-card">
      <div class="auth">
        <div class="auth-info">
          <div class="auth-image">
            <image-card round src="http://www.bjqlxy.com/img1/orignal/pics/hv1/35/9/2281/148324355.jpg"></image-card>
          </div>
          <div class="sub-title">欢迎登录乐乎阅读</div>
          <div class="title">学而时习之，不亦说乎</div>
        </div>
        <button class="auth-btn" open-type="getUserInfo" @getuserinfo="getUserInfo">
          授权登录
        </button>
      </div>
    </div>
</template>

<script>
  import ImageCard from './ImageCard'
  export default {
    name: 'AuthCard',
    components: {ImageCard},
    methods: {
      getUserInfo () {
        this.$emit('getUserInfo')
      }
    }
  }
</script>

<style scoped lang="scss">
  .auth-card {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(153,153,153,0.8);
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;

    .auth {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 250px;
      height: 230px;
      background: #F4F4F4;
      border-radius: 20px;

      .auth-info {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        .auth-image {
          width: 75px;
        }

        .sub-title {
          margin-top: 16px;
          color: #999;
          font-size: 13px;
          line-height: 18px;
        }

        .title {
          margin-top: 6px;
          color: #333;
          font-size: 17px;
          line-height: 23px;
          font-weight: 500;
        }
      }

      .auth-btn {
        margin-top: 38px;
        width: 100%;
        background-image: linear-gradient(90deg,#7483F7 0%,#475AF7 100%);
        border-radius: 0 0 20px 20px;
      }
    }
  }
</style>
